import React from "react";
const ThemeContext = React.createContext("dark");
class App extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    console.log("render App");
    return (
      <ThemeContext.Provider value={this.state.count}>
        <button onClick={this.handleClick}>点我改变状态</button>
        <Toolbar count={this.state.count} />
      </ThemeContext.Provider>
    );
  }
}
// function Toolbar() {
//   console.log("render Toolbar");

//   return (
//     <div>
//       <ThemedButton />
//     </div>
//   );
// }
class Toolbar extends React.Component {
  // shouldComponentUpdate() {
  //   return false;
  // }
  render() {
    console.log("render Toolbar");
    return (
      <div>
        <ThemedButton count={this.props.count} />
      </div>
    );
  }
}
// 这种响应式变化的能力到底是谁提供的
// 到底是因为setState导致的render?还是消费者响应生产者的变化？
// 组件只要定义了contextType 我就是消费者 消费者可以订阅生产者
// context 可以无视组件组件的组织渲染，依然可以响应生产者数据的变化
class ThemedButton extends React.Component {
  render() {
    console.log("render ThemedButton");

    return <button theme={this.props.count}>{this.props.count}</button>;
  }
}
// ThemedButton.contextType = ThemeContext;
export default App;
